<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
         <div class="mainor_te">
          <el-button :loading="exportLoading" @click="exportExcel">导出</el-button>
        </div>
        <el-form
          ref="form"
          :inline="true"
          class="demo-form-inline"
          label-width="80px"
        >
          <el-form-item label="单号">
            <el-input
              v-model.trim="form.order_sn"
              placeholder="请输入单号"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户">
            <el-autocomplete
              v-model="form.company_name"
              :fetch-suggestions="fetchCompanyList"
						  placeholder="请输入客户"
              @select="handleSelect"
            >
            	<template slot-scope="{ item }">
							<div>{{ item.company_name }}</div>
						</template>
            </el-autocomplete>
				  </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="date"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>

          <div class="clearfix"></div>

          <el-form-item class="marginTop10">
            <el-button class="reset marginLeft10" type="primary" @click="reset"
              >重置</el-button
            >
            <el-button
              type="primary"
              :loading="loading"
              @click="
                pagination.page = 1;
                getData();
              "
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="main_table" style="min-height: 590px">
        <el-table
          v-loading="loading"
          :data="result"
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
           <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column  align="center" label="单号" prop="order_sn" />
          <el-table-column  align="center" label="客户" prop="company.company_name" />
          <el-table-column  align="center" label="金额" prop="money" />
          <el-table-column  align="center" label="支付时间" prop="pay_date" />
          <el-table-column  align="center" label="创建时间" prop="create_date" />
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="pagination.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="pagination.per_page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="sizeChange"
            @current-change="pageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as softwareApi from "@/api/brokerage/software";
import { getCompanyListByName } from "@/api/user/services";
import moment from 'moment'

export default {
  data() {
    return {
      pagination: {
        page: 1,
        per_page: 20,
      },
      form: {
        order_sn: "",
        company_id:'',
        company_name:'',
      },
      date:'',
      total: 0,
      result: [],
      loading: true,
      companyList: [],
      selectedIds:[],
      exportLoading:false,
    };
  },
  created() {
      this.getCompanyListByName()
      this.getData();
  },
  methods: {
    fetchCompanyList(str,cb){
      var list = this.companyList
      var result = str ? list.filter(item=>item.company_name.indexOf(str) !== -1) : list
      cb(result)
    },
    handleSelect(e){
      this.form.company_name = e.company_name
      this.form.company_id = e.id
    },
    exportExcel(){
        if(this.selectedIds.length === 0){
          this.$message.warning('请先选中要导出的订单')
          return
        }
        this.exportLoading = true
        softwareApi.exportExcel({ids:this.selectedIds.join(',')}).then(res=>{
          if(res && res.errcode && res.errcode != 0){
            this.$message.error(res.errmsg)
            return
          }
          const link = document.createElement("a");
          let blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.download = "软件续费列表";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }).finally(()=>{
          this.exportLoading = false
        })
    },
    handleSelectionChange(e){
      this.selectedIds = e.map(item=>item.id)
    },
    getCompanyListByName(){
      getCompanyListByName({ model: 3 }).then((res) => {
        this.companyList = res.data.list;
      });
    },
    sizeChange(e) {
      this.pagination.per_page = e;
      this.getData();
    },
    pageChange(e) {
      this.pagination.page = e;
      this.getData();
    },
    getData() {
      this.loading = true;
      softwareApi
        .getList({
          ...this.pagination,
          ...this.form,
          start_time:this.date && this.date[0],
          end_time:this.date && this.date[1],
        })
        .then((res) => {
          this.loading = false;
          this.result = res.data.list || [];
          this.result.forEach(item=>{
            item.pay_date = moment(item.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            item.create_date = moment(item.created_at * 1000).format('YYYY-MM-DD HH:mm:ss')
          })
          this.total = res.data.count;
        });
    },
    reset() {
      this.date = ''
      this.form.company_id = ''
      this.form.company_name = ''
      this.form.order_sn = ''
      this.getData();
    },
  },
};
</script>

<style lang='scss' scoped>
  .mainor_form form {
    width: 100%;
  }
</style>